<template>
  <div>
    <el-card shadow="never">
      <el-menu :default-active="active" @select="onSelect">
        <el-menu-item
          v-for="item in constantRouterMap"
          :key="item.path"
          :index="item.path"
        >
          <i :class="item.icon"></i>
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      constantRouterMap: [
        {
          path: "/",
          icon: "el-icon-star-off",
          title: "最新动态",
        },
        {
          path: "social",
          icon: "el-icon-mobile-phone",
          title: "社交圈",
        },
        {
          path: "blog",
          icon: "el-icon-edit-outline",
          title: "博客列表",
        },
        {
          path: "project",
          icon: "el-icon-service",
          title: "开源项目",
        },
      ],
      active: "",
      parentUrl: "",
      menuList: [],
    };
  },
  computed: {},
  mounted() {
    let actived = this.$route.path.split("/")[1];
    if (actived === 'post') {
      actived = 'blog'
    } else if (actived === 'follower' || actived === 'following') {
      actived = 'social'
    } else if (actived === 'detail') {
      actived = 'project'
    }
    this.active = actived || '/';
  },
  methods: {
    onSelect(index) {
      if (index !== '/') {
        this.$router.push(`/${index}`).catch((err) => err);
      } else {
        this.$router.push(index).catch((err) => err);
      }
    },
  },
};
</script>